<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>菜品添加页面</title>
    <link rel="stylesheet" href="../../yl/index.css" />
    <!-- 布局样式 -->
    <link rel="stylesheet" href="../../yl/style.css" />
    <link rel="stylesheet" href="../../style/wangeditor.css">
    <link rel="stylesheet" href="../../yl/mobile.css" />
    <link rel="stylesheet" href="../../yl/easyui.css" />
    <link rel="stylesheet" href="../../yl/icon.css" />
</head>

<body>
    <!-- <div id="app"> -->
    <div class="easyui-navpanel" id="app" v-cloak>
        <header>
            <div class="m-toolbar">
                <div class="m-title">{{action=='Add'?'编辑菜品信息':action=='Modify'?'编辑菜品信息':''}}</div>
            </div>
        </header>
        <div class="easyui-navpanel panel-body panel-body-nobottom panel-body-noborder" style="height: 3000px"
            id="MainTable" ref="MainTable"
            :data-options="JSON.stringify({ 'TableName': 'dish_info', 'form': 'dataForm' ,'primary_key':'Dish_SerialNumber' })">
            <div class="yl-main">
                <div class="table_titel">
                    <div class="titel">商户信息</div>
                </div>
                <el-form :model="dataForm" ref="form1" :inline-message="true" style="width: 100%">
                    <el-descriptions :column="4" size="large" border>
                        <el-descriptions-item>
                            <template #label>
                                <div class="cell-item">商户名称</div>
                            </template>
                            <el-form-item :rules="[{ required: true, message: '请输入商户名称', trigger: 'blur' }]">
                                <!-- <el-select :disabled="action=='Modify'" @change="changeMerchant" clearable v-model.trim="dataForm.Merchant_SerialNumber" placeholder="请选择商户名称"
                                    filterable style="width: 100%">
                                    <el-option v-for="(item,index) in merchant" :key="index" :label="item.Merchant_Name"
                                        :value="item.Merchant_SerialNumber"></el-option>
                                </el-select> -->
                                <yl-cascader :disabled="action=='Modify'" @change="changeMerchant"
                                    v-model="dataForm.Merchant_Mapping_Blue_Plate_SerialNumber" filterable
                                    :props="{value:'id',label:'name',children:'children'}" placeholder="请选择商户名称"
                                    :options="merchant" style="width: 100%"></yl-cascader>
                            </el-form-item>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-form>
                <div id="ChildTable">
                    <div class="table_titel">
                        <div class="titel">菜品信息</div>
                        <div class="operation">
                            <el-button type="primary" size="small" @click="handleAdd('childDataForm')">新增</el-button>
                            <el-button type="danger" size="small" @click="handleRemove('childDataForm')">删除</el-button>
                        </div>
                    </div>
                    <el-form :model="{childDataForm:childDataForm.filter(i=>i.Row_Status != '1')}" ref="form1"
                        :inline-message="true" style="width: 100%">
                        <el-descriptions :column="3" size="large" border style="margin-bottom: 10px;"
                            v-for="(item,index) in childDataForm.filter(i=>i.Row_Status != '1')" :key="index">
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品图片</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Picture_URL'"
                                    :rules="[{ required: true, message: '请选择菜品图片', trigger: 'change' }]">
                                    <yl-upload v-model="item.Picture_URL"></yl-upload>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item :span="2">
                                <template #label>
                                    <div class="cell-item">菜品名称</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Dish_Name'"
                                    :rules="[{ required: true, message: '请输入菜品名称', trigger: 'blur' }]">
                                    <el-input v-model="item.Dish_Name" class="borderless-input" placeholder="请输入菜品名称" />
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item :span="3">
                                <template #label>
                                    <div class="cell-item">菜品描述</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Dish_Description'"
                                    :rules="[{ required: true, message: '请输入菜品描述', trigger: 'blur' }]">
                                    <el-input type="textarea" :autosize="{ minRows: 6}" v-model="item.Dish_Description"
                                        class="borderless-input" placeholder="请输入菜品描述" />
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">菜品类别</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Dish_Category_SerialNumber'"
                                    :rules="[{ required: true, message: '请选择菜品类别', trigger: 'change' }]">
                                    <yl-cascader class="borderless-input" v-model="item.Dish_Category_SerialNumber"
                                        :options="dish_category"
                                        :props="{ value: 'Dish_Category_SerialNumber', label: 'Dish_Category', children: 'children' }"
                                        placeholder="请选择菜品类别" clearable filterable></yl-cascader>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">价格</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Unit_Price'"
                                    :rules="[{ required: true, message: '请输入价格', trigger: 'blur' }]">
                                    <el-input v-model="item.Unit_Price" class="borderless-input" placeholder="请输入价格" />
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">准备时间(分钟)</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Preparation_Time'"
                                    :rules="[{ required: true, message: '请输入准备时间', trigger: 'blur' }]">
                                    <el-input v-model="item.Preparation_Time" class="borderless-input"
                                        placeholder="请输入准备时间" />
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">是否特色菜</div>
                                </template>
                                <el-form-item>
                                    <el-radio-group v-model="item.is_Featured">
                                        <el-radio label="1">是</el-radio>
                                        <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">是否辣</div>
                                </template>
                                <el-form-item>
                                    <el-radio-group v-model="item.is_Spicy">
                                        <el-radio label="1">是</el-radio>
                                        <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">是否素食</div>
                                </template>
                                <el-form-item>
                                    <el-radio-group v-model="item.is_Vegetarian">
                                        <el-radio label="1">是</el-radio>
                                        <el-radio label="0">否</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item>
                                <template #label>
                                    <div class="cell-item">食材信息</div>
                                </template>
                                <el-form-item :prop="'childDataForm.' + index + '.Food_Information'"
                                    :rules="[{ required: true, message: '请输入食材信息', trigger: 'blur' }]">
                                    <yl-text-editor v-model="item.Food_Information"
                                        placeholder="请输入食材信息"></yl-text-editor>
                                </el-form-item>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-form>
                </div>
            </div>
        </div>
        <footer class="botton-ann">
            <el-button @click="goBack">返回</el-button>
            <el-button type="primary" plain @click="handleSubmit" :loading="loading">提交</el-button>
        </footer>
    </div>
</body>
<script src="../../utils/utils.js"></script>
<script src="../../config/config.js"></script>
<script src="../../utils/compressor.js"></script>
<script src="../../utils/wangeditor.js"></script>
<script src="../../utils/mixins.js"></script>
<script src="../../yl/vue.js"></script>
<script src="../../yl/index.js"></script>
<script src="../../yl/zh-cn.mjs"></script>
<script src="../../yl/index.iife.min.js"></script>
<script src="../../yl/jquery.min.js"></script>
<script src="../../utils/jquery.cookie.js"></script>
<script src="../../yl/jquery.easyui.min.js"></script>
<script src="../../yl/jquery.easyui.mobile.js"></script>
<script src="../../yl/moment.min.js"></script>
<script src="../../api/request.js"></script>
<script src="./js/add1.js"></script>

</html>